<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="static/css/mdui.css">
    <link rel="stylesheet" type="text/css" href="static/css/mdui.min.css">
    <style>
        .mdui-textfield{
            margin: 0px auto;
        }

        .unselectable{
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .right{
            float:right;
        }

        .bottomspace{
            padding-bottom:16px;
        }

    </style>
    {% block myhead %}
    {% endblock %}
</head>
<body class="mdui-appbar-with-toolbar mdui-appbar-with-tab mdui-theme-primary-teal mdui-theme-accent-deep-purple">
<header class="mdui-appbar mdui-appbar-fixed ">
    <div class="mdui-toolbar mdui-color-theme">
        <a href="{{url_for('index')}}" class="mdui-typo-headline mdui-hidden-xs">PsyDig</a>
        <span class="mdui-typo-title unselectable">{% block mytitle %}{% endblock %}</span>
        <div class="mdui-toolbar-spacer"></div>
        <span>userstatus: {{user.status}} | username: {{user.username}}</span>
        {% if user.status %}
        <a href="{{url_for('logout')}}" class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"
           mdui-tooltip="{content: 'Logout'}"><i
                class="mdui-icon material-icons">exit_to_app</i></a>
        {% else %}
        <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content: 'Login'}"
              mdui-dialog="{target: '#loginDialog'}"><i class="mdui-icon material-icons">account_circle</i></span>
        {% endif %}
    </div>

    <div class="mdui-tab mdui-color-theme mdui-tab-scrollable " mdui-tab>
        {% for page in pages %}
        <a href="{{url_for(page)}}" class="mdui-ripple mdui-ripple-white">{{page}}</a>
        {% endfor %}
    </div>

</header>


<div class="mdui-container doc-container doc-no-cover bottomspace">
    {% block mybody %}
    {% endblock %}
</div>

<button class="mdui-fab mdui-color-theme-accent mdui-ripple mdui-fab-fixed"><i class="mdui-icon material-icons">add</i></button>

<div class="mdui-dialog" id="loginDialog">
    <div class="mdui-dialog-content">
        <div class="mdui-dialog-title">Login</div>
        <form action="{{url_for('login')}}" method="post">
            <div class="mdui-textfield">
                <label class="mdui-textfield-label">Account</label>
                <input class="mdui-textfield-input" name="username" type="text"/>
            </div>
            <div class="mdui-textfield">
                <label class="mdui-textfield-label">Password</label>
                <input class="mdui-textfield-input" name="password" type="password"/>
            </div>
            <br>
            <input class="mdui-btn mdui-color-theme-accent mdui-ripple right" type="submit" value="Submit" />
        </form>
    </div>
</div>

<script src="static/js/mdui.js"></script>
<script src="static/js/mdui.min.js"></script>
</body>
</html>
